<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <title>随心听</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <!--<meta name="keywords" content="Trendy Login Form template Responsive, Login form web template,Flat Pricing tables,Flat Drop downs  Sign up Web Templates, Flat Web Templates, Login sign up Responsive web template, SmartPhone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyEricsson, Motorola web design" />-->
  <script type="application/x-javascript"> addEventListener("load", function () {
    setTimeout(hideURLbar, 0);
  }, false);

  function hideURLbar() {
    window.scrollTo(0, 1);
  } </script>
  <!-- Custom Theme files -->
  <link th:href="@{/login/css/style.css}" rel="stylesheet" type="text/css" media="all"/>
  <link th:href="@{/login/css/layui.css}" rel="stylesheet" type="text/css">
  <link th:href="@{backed/assets/plugins/element-ui/index.css}" rel="stylesheet">
  <link th:href="@{/login/css/s1.css}" type='text/css'><!--web font-->
  <!-- //web font -->
  <style>
    .text_username {
      outline: none;
      font-size: 15px;
      color: #fff;
      border: none;
      width: 90%;
      display: inline-block;
      background: transparent;
      font-family: 'Muli', sans-serif;
      text-align: center;
      letter-spacing: 2px;
    }
  </style>
</head>
<body>
<!-- main -->
<div class="agileits-main" id="app">
  <div class="w3top-nav">
    <div class="w3top-nav-left">
      <h1 style="color:white">Trendy</h1>
    </div>
    <div class="w3top-nav-right">

    </div>
    <div class="clear"></div>
  </div>
  <div class="header-main">
    <h2>Login Now</h2>
    <!--        <button type="button" class="layui-btn layui-btn-primary" lay-on="msg">Msg</button>-->
    <div class="header-bottom">
      <div class="header-right w3agile">
        <div class="header-left-bottom agileinfo">
          <form method="post" lay-filter="add_form">
            <div class="icon1">
              <input type="text" class="text_username" name="username" placeholder="Username"
                     required="" v-model:value="loginMsg.username"/>
            </div>
            <div class="icon1">
              <input type="password" name="password" placeholder="Password" required=""
                     v-model:value="loginMsg.password"/>
            </div>
            <div class="login-check">
              <label class="checkbox"><input type="checkbox" name="checkbox" id="remember"><i> </i> Keep me
                logged in</label>
            </div>
            <div class="bottom">
              <input type="button" value="Log in" lay-on="msg" @click="login_Submit"/>
            </div>
            <p><a th:href="@{forgot-password}">Forgot Password?</a>&nbsp; | &nbsp;<a th:href="@{register_html}"
                                                                                     style="color:#31bdec">Register
              Now?</a></p>
          </form>
        </div>
      </div>
    </div>
  </div>

</div>
<!-- //main -->
<!-- copyright -->
<div class="copyright w3-agile">
  <p>© 2024 Trendy Login Form . All rights reserved | Design by <a href="http://w3layouts.com/" target="_blank">W3layouts</a>
  </p>
</div>
<!-- //copyright -->

</body>
<script th:src="@{/login/js/layui.js}"></script>
<script th:src="@{/login/js/jquery-1.12.4.js}"></script>
<!--<script th:src="@{/login/js/jquery.min.js}"></script>-->
<!--<script th:src="@{/login/js/jquery-3.2.1.min.js}"></script>-->
<script th:src="@{/login/js/vue.js}"></script>
<script th:src="@{/login/js/login_js/login.js}"></script>
<script th:src="@{backed/assets/plugins/element-ui/index.js}"></script>


<script th:inline="javascript">

  layui.use(function () {

    var layer = layui.layer;

    // 加载页面触发
    layer.ready(function () {
      var msg = [[${msg}]]

      if (msg != null) {
        layer.msg(msg);
        // console.log("msg")
      }
    })
  });
</script>
-->
<script>

  const vm = new Vue({

    el: "#app",
    data: {
      loginMsg: {
        username: "",
        password: "",
        checked: ""
      }
    },
    mounted: function () {
      //回显cookie
      this.cookieView();
      //回显登录成功的账号
      this.showUsername("register")
      this.showUsername("forgot")

    },
    methods: {
      //1、登录按钮的点击
      login_Submit() {
        //获取复选框的状态
        this.loginMsg.checked = $('#remember').prop('checked');
        //登录请求的发送
        loginApi(this.loginMsg).done(function (res) {
          //请求成功执行的回调函数
          if (res.code === 200) {
            if (res.msg === "root_success") {
              //发送session
              window.sessionStorage.setItem("username", res.data.username)
              window.location.href = "index.html";
            } else {
              window.location.href = "user.html";
            }
          } else if (res.code === 500) {
            layui.layer.msg(res.msg);
          } else {
            layui.layer.msg("网络连接断开！");
          }
        }).fail(function (e) {
          //请求失败执行的回调函数
          layui.layer.msg("请求出错！");
        })
      },

      //2、获取cookie回显
      cookieView() {
        console.log(document.cookie)
        var username = this.getCookie("cookie_username");
        var password = this.getCookie("cookie_password");
        var remember = this.getCookie("cookie_checked");
        console.log(username)
        console.log(password)
        console.log(remember)
        if (remember == 'true') {

          this.loginMsg.username = username;
          this.loginMsg.password = password;
          this.loginMsg.checked = remember;
          $('#remember').prop('checked', true);
          //重新渲染页面
          this.$forceUpdate();
        }
      },
      //3、获取cookie中的值 mkey：后端传过来的名字
      getCookie(mkey) {
        //加载时触发 拿到cookie来完成回显
        let cookies = document.cookie.split(";");
        for (var i = 0; i < cookies.length; i++) {
          var kv = cookies[i].split('=');
          if (kv[0].trim() == mkey) {
            return kv[1].trim();
          }
        }
      },
      //4、回显注册成功的账号,并销毁
      showUsername(key) {
        if (window.localStorage.getItem(key+"_return_username") != null) {
          let password = window.localStorage.getItem(key+"_return_password") === null ? "" : window.localStorage.getItem(key+"_return_password") + "";
          this.loginMsg.username = window.localStorage.getItem(key+"_return_username");
          this.loginMsg.password = password;
          this.loginMsg.checked = false;
          this.$notify({
            title: "成功",
            type: 'success',
            message: "" ===password ? '您的账号:' + window.localStorage.getItem(key+"_return_username"):'密码成功更改!' ,
            showClose: false
          });
          window.localStorage.removeItem(key+"_return_username");
        } else {
          console.log("没有完成一个"+key)
        }
      }
    }
  });

</script>
</html>
<script setup lang="ts">
</script>